<template>
  <div class="supervision-left">
    <div class="supervision-left-top" style="cursor: pointer;" @click="gohome">
      <img src="@/assets/img/townPreview/回到首页.png" alt="">
      <span>回到首页</span>
    </div>
    <div class="supervision-left-content">
      <!-- <left-item v-for="(item,index) in list" :key="index" :item="item" /> -->
      <div class="full-right-table">
        <div class="full-right-table-title" style="font-size:18px">
          资金资产资源情况
        </div>
        <dv-scroll-board
          :config="config1"
          style="width:100%;height:90%"
          @click="tableClickTop"
        />
      </div>
      <div class="left-table">
        <div class="left-table-title">{{ tableData.title }}</div>
        <div class="left-table-content">
          <dv-scroll-board
            :config="tableData.data"
            style="width:100%;height:100%"
            @click="tableClick"
          />
        </div>
      </div>
    </div>
    <a-modal
      :visible="dbclickVisible"
      :title="`${dailgTitle}(${leftTitle})`"
      width="90vw"
      class="dbclickModal"
      :body-style="{ height: '450px' }"
      cancel-text="取消"
      ok-text="确定"
      @ok="dbclickOk"
      @cancel="dbclickCancel"
    >
      <!-- <table-common :menu-id="menuId" :filter-list="leftFilterList" /> -->
      <div v-if="modalFlag === 'leftTop'" class="table1Modal">
        <div class="table1ModalLeft">
          <h1>资金汇总<span>(单位:万元)</span></h1>
          <div class="table1ModalBot">
            <div class="ModalItem">
              <table1
                :table1="tableList1"
                :headers-list="tableHeaderData.list1"
              />
            </div>
            <div class="ModalItem">
              <table1
                :table1="tableList1"
                :headers-list="tableHeaderData.list2"
              />
            </div>
            <div class="ModalItem">
              <table1
                :table1="tableList1"
                :headers-list="tableHeaderData.list3"
              />
            </div>
            <div class="ModalItem">
              <table1
                :table1="tableList1"
                :headers-list="tableHeaderData.list4"
              />
            </div>
          </div>
        </div>
        <div class="table1Modalright">
          <VEcharts
            autoresize
            :options="optModal"
            style="width: 100%; height: 90%"
          />
        </div>
      </div>
      <div v-if="modalFlag === 'leftBot'">
        <table1
          :table1="tableList1"
          :headers-list="tableHeaderData.list6"
          @rowtableClick="rowtableClick"
        />
      </div>
      <template slot="footer">
        <span style="color:#0a1c37">1</span>
      </template>
    </a-modal>
  </div>
</template>

<script>
// import VEcharts from '@/components/vecharts';
// import LeftItem from './LeftItem';
import _ from 'lodash';
import {
  getQueryBodyByProduce,
  getReportHeaderByTableId
} from '@/api/dynamicInterface';
// import tableCommon from '@/components/tableCommon/index.vue';
import VEcharts from '@/components/vecharts';
import table1 from './tabble/table';

export default {
  name: 'Left',
  components: {
    VEcharts,
    // LeftItem,
    // tableCommon,
    table1
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    table: {
      type: Object,
      default: () => ({})
    },
    table1: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // tableData: {},
      modalFlag: '',
      tableList: [],
      dbclickVisible: false,
      config1: {},
      menuId: '',
      leftFilterList: [],
      tableList1: [{ XJ: 12, YBYSZXBZ: 12, TZJSSR: '一般预算专项补助' }],
      tableHeaderData: {
        list1: {
          // title: "财政拨款收入",
          data: [
            {
              ZD: 'CZBKSRXJ',
              label: '财政拨款收入',
              size: true
            }
            // {
            //   ZD: "CZBKSRXJ",
            //   label: "小计",
            //   width: 100
            // },
            // {
            //   ZD: "YBYSZXBZ",
            //   label: "一般预算专项补助"
            // },
            // {
            //   ZD: "TZJSSR",
            //   label: "体制结算收入(年初预算）"
            // }
          ]
        },
        list2: {
          // title: "镇街本级收入",
          data: [
            {
              ZD: 'ZJBJSRXJ',
              label: '镇街本级收入',
              size: true
            }
            // {
            //   ZD: "ZJBJSRXJ",
            //   label: "小计",
            //   width: 100
            // },
            // {
            //   ZD: "ZCCZSR",
            //   label: "资产出租收入"
            // },
            // {
            //   ZD: "ZCCSSR",
            //   label: "资产出售收入"
            // },
            // {
            //   ZD: "GMCSSR",
            //   label: "公墓出售收入"
            // },
            // {
            //   ZD: "CKLXSR",
            //   label: "存款利息收入"
            // },
            // {
            //   ZD: "CQXGSR",
            //   label: "拆迁相关收入"
            // },
            // {
            //   ZD: "ZJDBJSR",
            //   label: "宅基地补缴收入"
            // },
            // {
            //   ZD: "ZYJJSRQT",
            //   label: "其他",
            //   width: 100
            // }
          ]
        },
        list3: {
          // title: "专用资金收入",
          data: [
            {
              ZD: 'ZYJJSRXJ',
              label: '专用资金收入',
              size: true
            }
            // {
            //   ZD: "ZYJJSRXJ",
            //   label: "小计",
            //   width: 100
            // },
            // {
            //   ZD: "TDCRJSY",
            //   label: "土地出让金收益"
            // },
            // {
            //   ZD: "QJBMZB",
            //   label: "区级部门转拨"
            // },
            // {
            //   ZD: "ZYJJSRQT",
            //   label: "其他",
            //   width: 100
            // }
          ]
        },
        list4: {
          // title: "其他政府资金",
          data: [
            {
              ZD: 'QTZFZJXJ',
              label: '其他政府性资金',
              size: true
            }
            // {
            //   ZD: "QTZFZJXJ",
            //   label: "小计",
            //   width: 100
            // },
            // {
            //   ZD: "BZJ",
            //   label: "保证金"
            // },
            // {
            //   ZD: "CQPCK",
            //   label: "拆迁赔偿款"
            // },
            // {
            //   ZD: "DJGCK",
            //   label: "代建工程款"
            // },
            // {
            //   ZD: "QTZFZJQT",
            //   label: "其他",
            //   width: 100
            // }
          ]
        },
        list5: {
          data: [
            {
              ZD: 'XH',
              label: '序号',
              width: 100
            },
            {
              ZD: 'IYEAR',
              label: '年度'
            },
            {
              ZD: 'ZSJZJFL',
              label: '转移支付类型'
            },
            {
              ZD: 'FILENO',
              label: '发文文号'
            },
            {
              ZD: 'FWRQ',
              label: '发文日期'
            },
            {
              ZD: 'BFRQ',
              label: '拨付日期'
            },
            {
              ZD: '	SJDWMC',
              label: '上级单位名称'
            },
            {
              ZD: 'XMMC',
              label: '项目名称'
            },
            {
              ZD: 'JE',
              label: '金额'
            },
            {
              ZD: 'SKYH',
              label: '收款银行'
            },
            {
              ZD: 'SKZH',
              label: '收款账号'
            },
            {
              ZD: 'SKR',
              label: '收款人'
            },
            {
              ZD: 'ZFLH',
              label: '支付令号',
              width: 100
            },
            {
              ZD: 'YF',
              label: '月份'
            },
            {
              ZD: 'JD',
              label: '进度',
              width: 100
            }
          ]
        },
        list6: {
          height: '400px',
          data: []
        }
      },
      leftTitle: '',
      dailgTitle: '',
      optModalList: []
    };
  },
  // created() {
  //   this.getTableData();
  // },
  computed: {
    tableData() {
      const data = _.cloneDeep(this.table1);
      const tableData = data.data && data.data.data;
      tableData &&
        tableData.length &&
        tableData.forEach(i => {
          i[1] = `<span style="color:#c1c919;">${i[1]}</span>`;
          i[2] = `<span style="color:#C1C919;">${i[2]}</span>`;
          // if (i[3] === '低风险') {
          //   i[3] = `<span style="color:#37CA61;">${i[3]}</span>`;
          // } else if (i[3] === '中风险') {
          //   i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
          // } else if (i[3] === '高风险') {
          //   i[3] = `<span style="color:#9F2115;">${i[3]}</span>`;
          // }
          i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
        });
      return data;
    },
    menuList() {
      return this.$store.state.permission.menuList;
    },
    optModal() {
      const newArr = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // 图例布局: 垂直
          orient: 'vertical',
          // 图例图标的位置
          align: 'left',
          textStyle: {
            // 图例文字的样式
            color: '#fff',
            fontSize: 12
          },
          // 图例位置
          x: 'right',
          y: 'bottom',
          // 图标
          icon: 'circle',
          padding: [0, 50, 50, 0]
          // backgroundColor: '#fff'
        },
        series: [
          {
            type: 'pie',
            // 饼图的占面积
            radius: '80%',
            center: ['40%', '50%'],
            data: this.optModalList,
            label: {
              show: true,
              position: 'outside',
              formatter: function(params) {
                if (params.value) {
                  return params.value;
                } else {
                  return '';
                }
              },
              textStyle: {
                color: '#fff',
                fontSize: 14
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: '#fff'
              }
            }
          }
        ]
      };
      return newArr;
    }
  },
  created() {
    this.getConfigList();
  },
  methods: {
    getConfigList() {
      getQueryBodyByProduce({
        pageIndex: 0,
        pageSize: 100,
        tableId: 1027,
        pageType: 1
      }).then(res => {
        const arr = [];
        if (res.success && res.data.length) {
          res.data.forEach(item => {
            arr.push([item.DW, item.ZJ, item.ZC, item.ZY]);
          });
          this.config1 = {
            header: ['单位', '资金', '资产', '资源'],
            data: arr,

            headerBGC: '#306494',
            rowNum: 8,
            columnWidth: [400, 400, 400, 250]
          };
        }
      });
    },
    dbclickCancel() {
      this.dbclickVisible = false;
    },
    dbclickOk() {
      this.dbclickVisible = false;
    },
    gohome() {
      this.$router.push('/');
    },
    getTableData() {
      const data = _.cloneDeep(this.table);
      // getQueryBodyByProduce({
      //   pageIndex: 0,
      //   pageSize: 100,
      //   tableId: 824,
      //   pageType: 1
      // }).then(res => {
      //   if (res.success && res.data.length) {
      //     this.tableList = res.data;
      //     data.data.data = [];
      //     res.data.forEach(item => {
      //       const arr = [];
      //       arr[0] = item.PROGRAMNAME2;
      //       arr[1] = item.EJXMJE;
      //       arr[2] = item.DEPARTMENTNAME;
      //       data.data.data.push(arr);
      //     });
      //   }
      this.tableData = data;
      // });
    },
    async tableClick({ row }) {
      if (row[0] === '齐贤街道') {
        if (!this.tableHeaderData.list6.data.length) {
          await getReportHeaderByTableId({ tableId: 715 }).then(res => {
            if (res.success && res.data) {
              res.data = res.data.sort((a, b) => {
                return a.orderId - b.orderId;
              });
              res.data.forEach(item => {
                if (item.display === 1) {
                  this.tableHeaderData.list6.data.push({
                    ZD: item.dataIndex,
                    label: item.title
                  });
                }
              });
            }
          });
        }
        this.modalFlag = 'leftBot';
        this.dbclickVisible = true;
        this.dbclickVisible = true;
        this.leftTitle = row[0];
        this.dailgTitle = '乡镇风险分类';
        this.tableList1 = [];
        getQueryBodyByProduce({
          pageIndex: 0,
          pageSize: 100,
          tableId: 715,
          pageType: 1
        }).then(res => {
          if (res.success && res.data.length) {
            res.data.forEach(item => {
              if (item.PROGRAMNAME2 === '高标准农田建设') {
                this.tableList1.unshift(item);
              } else {
                this.tableList1.push(item);
              }
            });
          }
        });
      }

      // this.menuId = 1627546142847;
      // this.leftFilterList = [];
      // const { PROGRAMCODE2 } = this.tableList[rowIndex];
    },
    tableClickTop(val) {
      this.modalFlag = 'leftTop';
      const { row } = val;
      this.dbclickVisible = true;
      this.leftTitle = row[0];
      this.dailgTitle = '资金清单';
      getQueryBodyByProduce({
        pageIndex: 0,
        pageSize: 100,
        tableId: 1017,
        pageType: 1,
        filterList: [{ col: 'DW', value: row[0] }]
      }).then(res => {
        if (res.success && res.data.length) {
          this.tableList1 = [{
            CZBKSRXJ: (+res.data[0].CZBKSRXJ).toFixed(2),
            ZJBJSRXJ: (+res.data[0].ZJBJSRXJ).toFixed(2),
            ZYJJSRXJ: (+res.data[0].ZYJJSRXJ).toFixed(2),
            QTZFZJXJ: (+res.data[0].QTZFZJXJ).toFixed(2)

          }];
          this.optModalList = [
            {
              name: '财政拨款收入',
              value: (+res.data[0].CZBKSRXJ).toFixed(2)
            },
            {
              name: '镇街本级收入',
              value: (+res.data[0].ZJBJSRXJ).toFixed(2)
            },
            {
              name: '专用资金收入',
              value: (+res.data[0].ZYJJSRXJ).toFixed(2)
            },
            {
              name: '其他政府资金',
              value: (+res.data[0].QTZFZJXJ).toFixed(2)
            }
          ];
        }
      });
    },
    rowtableClick(val) {
      console.log(val);
      if (val.PROGRAMNAME2 === '高标准农田建设') {
        this.getItem(this.menuList, '/digitalReportQr1/index.vue');
        this.goRoute(this.btnItem, val.PROGRAMNAME2);
      }
    },
    getItem(arr, name) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].componentPath === name) {
          this.btnItem = arr[i];
        }
        if (arr[i].children) {
          this.getItem(arr[i].children, name);
        }
      }
    },
    goRoute(item, Name) {
      const params = {
        path: item.path,
        query: {
          parentName: item.parentTitle,
          title: item.title,
          menuId: item.id,
          flag: 0,
          sId: 'TabsTable',
          isHideLeft: item.isHideLeft,
          isHideTop: item.isHideTop,
          // isShow: true
          PROGRAMNAME2: Name
        }
      };
      if (item.isTargetNew + '' === '0') {
        this.$router.push(params);
      } else {
        const routeUrl = this.$router.resolve(params);
        const tempwindow = window.open('_blank'); // 先打开页面
        tempwindow.location = routeUrl.href; // 后更改页面地址
      }
    }
  }
};

// computed: {
//   tableData() {
//     const data = _.cloneDeep(this.table);
//     const tableData = data.data && data.data.data;
//     tableData && tableData.length && tableData.forEach(i => {
//       i[1] = `<span style="color:#c1c919;">${i[1]}</span>`;
//       i[2] = `<span style="color:#C1C919;">${i[2]}</span>`;
//       // if (i[3] === '低风险') {
//       //   i[3] = `<span style="color:#37CA61;">${i[3]}</span>`;
//       // } else if (i[3] === '中风险') {
//       //   i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
//       // } else if (i[3] === '高风险') {
//       //   i[3] = `<span style="color:#9F2115;">${i[3]}</span>`;
//       // }
//       i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
//     });
//     return data;
//   }
// }
</script>

<style lang="scss" scoped>
.supervision-left {
  padding: 1%;
  color: #1fd2ff;
  .supervision-left-top {
    border: 1px solid #1fd2ff;
    border-radius: 9px;
    padding: 5px 25px;
    height: 34px;
    text-align: center;
    img {
      vertical-align: middle;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
    }
  }
  .supervision-left-content {
    height: calc(100% - 34px);
    padding-top: 1%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .left-item {
      margin-top: 10px;
      height: 33%;
      width: 100%;
    }
    .left-table {
      margin-top: 10px;
      height: calc(34% - 30px);
      background-image: url("~@/assets/images/fullscreen/xmlx.png");
      background-size: 100% 100%;
      padding: 10px;
      .left-table-title {
        height: 30px;
        font-size: 18px;
      }
      .left-table-content {
        height: calc(100% - 30px);
        .dv-scroll-board {
          color: #1fd2ff;
        }
      }
    }
  }
}
.full-right-table {
  background-image: url("~@/assets/images/fullscreen/xmlx.png");
  background-size: 100% 100%;
  padding: 10px;
  height: 67%;
  .full-right-table-title {
    height: 10%;
    color: #1fd2ff;
    padding-left: 20px;
  }
  .dv-scroll-board {
    color: #1fd2ff;
  }
}
.table1Modal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
  height: 100%;
  .table1ModalLeft {
    width: 40%;
     height: 100%;
     h1{
       margin: 0;
       color: #f6bd16;
       text-align: center;
       span{
         font-size: 16px;
       }
     }
  }
  .table1ModalBot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-around;
    height: 70%;
  }
  .table1Modalright {
    width: 55%;
  }
  .ModalItem {
    width: 45%;
  }
}
.dbclickModal /deep/.ant-modal .ant-modal-content {
  background: #0a1c37;
}
.dbclickModal /deep/.ant-modal-header {
  background: #0a1c37;
}
.dbclickModal /deep/.ant-modal-title {
  color: #f6bd16;
}

.dbclickModal /deep/.ant-modal-header {
  border-color: #143c6e;
}
.dbclickModal /deep/.ant-modal-footer {
  border-color: #143c6e;
}
.dbclickModal /deep/.ant-modal-close-x {
  color: #f6bd16;
}
</style>
